<script lang="ts" setup name="RechargeDialog">
import { FormInstance } from 'element-plus'
import { Dialog } from '~/src/api/interface'
import { Member } from '~/src/api/interface/member'

const rules = reactive({
  balance: [{ required: true, message: '请填写充值金额' }],
  memo: [{ required: true, message: '请填写备注' }],
})

const dialogVisible = ref(false)
const dialogProps = ref<Dialog<Partial<Member.Recharge>>>({
  title: '',
  data: {},
  visible: false,
})
// 接收父组件传过来的参数
const acceptParams = async (params: Dialog<Partial<Member.Recharge>>) => {
  dialogProps.value = params
  dialogVisible.value = true
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      await dialogProps.value.api!(dialogProps.value.data)
      ElMessage.success('充值成功！')
      dialogProps.value.getTableList!()
      dialogVisible.value = false
    } catch (error) {
      console.log(error)
    }
  })
}
watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) ruleFormRef.value?.resetFields()
  }
)

defineExpose({
  acceptParams,
})
</script>

<template>
  <vab-dialog v-model:modelValue="dialogVisible" :title="`${dialogProps.title}会员充值`" width="400">
    <el-form ref="ruleFormRef" label-suffix=" :" label-width="100px" :model="dialogProps.data" :rules="rules">
      <el-form-item label="会员名称">
        <el-text>{{ dialogProps.data!.nickName }}</el-text>
      </el-form-item>
      <el-form-item label="当前余额">
        <el-text>{{ dialogProps.data!.currentBalance }}</el-text>
      </el-form-item>
      <el-form-item class="width100" label="充值金额" prop="balance">
        <input-number-float v-model="dialogProps.data!.balance" v-selectAll :controls="false" />
      </el-form-item>
      <el-form-item label="赠送金额" prop="giftAmount">
        <input-number-float v-model="dialogProps.data!.giftAmount" v-selectAll :controls="false" />
      </el-form-item>
      <el-form-item label="备注" prop="memo">
        <el-input v-model="dialogProps.data!.memo" placeholder="请输入" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
